<template>
  <section class="todoapp">
    <Header 
      @add="addFn" 
      :list="todoList"
    />

    <List :list="todoList" :del="delFn" :changeInp="changeInp" />

    <Footer :clearFn="clearFn" :all="allCount" :trueCount="trueCount" :falseCount="falseCount" />
  </section>
</template>

<script>
import './styles/base.css'
import './styles/index.css'

import Footer from '@/components/Footer.vue'
import Header from './components/Header.vue'
import List from './components/List.vue'

export default {
  components: { Footer, Header, List },
  data() {
    return {
      // todoList: [
      //   { id: '001', name: '吃饭', isDone: true },
      //   { id: '002', name: '睡觉', isDone: false },
      //   { id: '003', name: '打豆豆', isDone: true }
      // ]
      todoList :JSON.parse(localStorage.getItem('todoList')) || []
    }
  },
  methods: {
    // 添加功能
    addFn(val) {
      let id =
        this.todoList.length === 0
          ? '001'
          : this.todoList[this.todoList.length - 1].id / 1 + 1
      this.todoList.push({
        id,
        name: val,
        isDone: false
      })
    },
    // 根据id删除
    delFn(id) {
      let ind = this.todoList.findIndex((p) => p.id === id)
      this.todoList.splice(ind, 1)
    },

    // 小选框状态改变
    changeInp(id) {
      let ind = this.todoList.findIndex((p) => p.id === id)
      this.todoList[ind].isDone = !this.todoList[ind].isDone
    },

    // 清除已完成
    clearFn() {
      this.todoList = this.todoList.filter((p) => p.isDone === false)
    }
  },

  computed: {
    // 总数量
    allCount() {
      return this.todoList.length
    },
    // 已完成数量
    trueCount() {
      return this.todoList.filter((p) => p.isDone === true).length
    },
    // 未完成数量
    falseCount() {
      return  this.todoList.filter((p) => p.isDone === false).length
    },
  },

  watch:{
    todoList:{
      deep:true, // 深度监听
      handler(){
        localStorage.setItem('todoList',JSON.stringify(this.todoList))
      }
    }
  }





}
</script>

<style>
</style>